<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>写评语-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart id="week-comment-detail">
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> 
	  			<a onclick="back()" href="javascript:;" class="icon icon-109 f-white">返回</a> 
	  		</div>
	    	<h1 class="weui-header-title">写评语</h1>
	    </div>
		<div class="weui_tab_bd">
		    <div class="dianping">
			    <ul id="commentList">
			    </ul>
			</div>
			<div class="pingyu">
			    <header>
			      <h4>${student.name }同学 第${weekNo }周评语</h4>
			      <%-- <div class="make_temp" onclick="initTemplateType()">
			        <img src="<%=basePath %>/images/iconX.png">
			        <p>插入模板</p>
			      </div> --%>
			    </header>
				<div class="weui_cells weui_cells_form mt0">
		            <div class="weui_cell">
		                <div class="weui_cell_bd weui_cell_primary">
		                    <textarea placeholder="请输入对学生的评语内容..." id="teacherCommentContent">${comment.teacherCommentContent }</textarea>
		                </div>
		            </div>
		            <div class="weui_uploader">
	                    <div class="weui_uploader_bd">
	                      <ul class="weui_uploader_files img-click" id="img1">
	                      	<c:forEach var="itm" items="${comment.attachList }">
	                      		<c:choose>
	                      			<c:when test="${itm.teacherId != null }">
		                      			<li class="weui_uploader_file" data-id="${itm.id }" data-src="${itm.attachmentUrl }" style="margin-right:0;margin-bottom:16px;position: relative;">
			                      			<div class="img-del" onclick="imgDel(this)">
			                      				<span class="icon icon-26"></span>
			                      			</div>
			                      			<img onclick="imgClick(this)" src="${config.imgUrl}${itm.attachmentUrl }"/>
			                      		</li>
	                      			</c:when>
	                      			<c:otherwise>
	                      				<li class="weui_uploader_file hide" data-id="${itm.id }" class="hide">
			                      		</li>
	                      			</c:otherwise>
	                      		</c:choose>
	                      	</c:forEach>
	                      </ul>
	                      <div class="weui_uploader_input_wrp" id="filePicker" style="margin-bottom: 20px; margin-left: 15px; width: 60px; height: 60px; border-radius: 5px;">
	                         
	                      </div>
	                    </div>
	                </div>
		        </div>
			</div>
			<div class="weui_btn_area mb55">
			    <a href="javascript:" id="submit" class="weui_btn bg-blue">提交</a>
			</div>
		</div>
	</div>
	
	<div class="hide_main">
	    <header>
	      <h5>学生表现文字模板</h5>
	      <img src="<%=basePath %>/images/iconC.png" onclick="hideComment()">
	    </header>
	    <div class="t_nav">
	      <ul id="templateTypeList">
	      </ul>
	    </div>
	    <div class="t_content">
	    </div>
	  </div>
	  <div class="hide_black"></div>
</body>
<script type="text/javascript">
	$(function() {
		initTeacherCommentType();
		$("#templateTypeList").on("click", "li", function() {
			var obj = $(this);
			obj.addClass("active").siblings().removeClass("active");
			var t_obj = $($(".t_template")[obj.index()]);
			t_obj.addClass("show").siblings().removeClass("show")
			if(t_obj.find(".temp").length == 0) {
				initTemplateList(1, obj.attr("data-key"));
			}
		})
		$("#submit").click(function() {
			var teacherCommentType = "";
			var list = $("#commentList li");
			var isOk = true;
			for(var i = 0; i < list.length; i++) {
				var obj = list[i];
				var type = $(obj).find("p:first").html();
				var star = $(obj).find(".f-red").length;
				if(star == 0) {
					isOk = false;
					$.alert(type + "未评","");
					break;
				}
				teacherCommentType += type+"|"+star + ((i+1)<list.length ? "," : "");
			}
			if(!isOk) return;
			var teacherCommentContent = $("#teacherCommentContent").val();
			if(teacherCommentContent.trim() == "") {
				$.alert("请填写学生评语", "");
				return;
			}
			var attachIds = "";
		    var len = $("#img1 li").length;
		    $("#img1 li").each(function(i, v) {
			   attachIds += $(v).attr("data-id") + ((i+1) < len ? "," : "");
		    })
			$.ajax({
				url: basePath + "/ls/week/comment/addAndUpdate",
		        type: 'POST',
		        dataType: 'json',
		        data: {
		        	id: emptyToNull("${comment.id}"),
		        	studentId: "${student.id}",
		        	teacherCommentContent: teacherCommentContent,
		        	teacherCommentType: teacherCommentType,
		        	weekNo: "${weekNo}",
		        	attachIds: attachIds
		        },
				async : false,
				success : function(data) {
					if(data.code == '000') {
						$.toast("提交成功！");
						setTimeout(function(){
							window.location.href = basePath + "/ls/week/comment?v=" + new Date().getTime();
						}, 1000);
					}else {
						$.toptips(data.msg);
					}
				}, error:function(){
					$.alert("提交异常","");
				}
			})
		})
	});
	function init() {
	    //星星评价-star-
	    var li = document.getElementsByClassName("dianping")[0].getElementsByTagName('li');
	    for (var i=0;i<li.length;i++) {
	      var j = li[i];
	      j.index = i;
	      li[i].onmouseover = function () {
	        var star = li[this.index].getElementsByClassName("icon-49");
	        var star2 = li[this.index].getElementsByClassName("icon-48");

	        for (var a=0;a<star.length;a++) {
	          var b = star[a];
	          b.index = a;
	          star[a].onclick = function () {
	            var c = this.index;
	            for(var d=0;d<5;d++){
	              if(c>=0){
	                star[c].className = "icon icon-48 f-red";
	                c=c-1;
	              }
	            }
	          }
	        };
	        var le = li[this.index].getElementsByClassName("icon-48").length;
	        for (var e=0;e<star2.length;e++) {
	          var f = star2[e];
	          f.index = e;
	          star2[e].onclick = function () {
	            var g = this.index;
	            for(var h=g+1;h<le;h++){
	              if(g+1<le){
	                star2[g+1].className = "icon icon-49";
	              }
	            }
	          }
	        }
	      }
	    }
	}
	function hideComment() {
  		$(".hide_black").hide();
  		$(".hide_main").hide();
  	}
	function initTemplateType() {
		$(".hide_black").show();
  		$(".hide_main").show();
		$.ajax({
			url: basePath + "/sys/dict/dictData/dictCode",
	        type: 'POST',
	        dataType: 'json',
	        data: {
	        	dictCode: 'comment_type'
	        },
			async : false,
			success : function(data) {
				if(data != null) {
					var html = "";
					var html1 = "";
					for(var i in data) {
						var itm = data[i];
						html += '<li '+(i==0 ? 'class="active "' : '')+'data-key="'+itm.dictDataKey+'">'+itm.dictDataValue+'</li>';
						html1 += '<div class="t_template t_template_'+itm.dictDataKey+(i==0 ? ' show' : '')+'"><div class="t_main box_key_'+itm.dictDataKey+'"></div><div class="page_change"></div></div>';
					}
					$("#templateTypeList").html(html);
					$(".t_content").html(html1);
				}
				initTemplateList(1, data[0].dictDataKey);
			}, error:function(){
				$.alert("查询异常","");
			}
		})
	}
	function insertTemplate(thiz) {
		$("#teacherCommentContent").val($(thiz).closest(".temp").find("p").html());
		hideComment();
	}
	function initTemplateList(pageNo, dictDataKey) {
		$.ajax({
			url: basePath + "/ls/week/comment/commentTemplate/page",
	        type: 'POST',
	        dataType: 'json',
	        data: {
	        	dictDataKey: dictDataKey,
	        	rows: 5,
	        	page: pageNo
	        },
			async : false,
			success : function(data) {
				if(data != null) {
					var html = '';
					for(var i in data.results) {
						var itm = data.results[i];
						html += '<div class="temp"><p>'+itm.templateContent+'</p><span class="t_btn" onclick="insertTemplate(this)">插入</span></div>';
					}
					$(".box_key_" + dictDataKey).html(html);
					var pageh = '';
					if(data.pageNo > 1) {
						pageh += '<span class="left" onclick="initTemplateList('+(parseInt(data.pageNo)-1)+', '+dictDataKey+')">上一页</span>';
					}
					if(data.totalPage > 0) {
						pageh += '<p>'+data.pageNo+'/'+data.totalPage+'</p>';
					}
					if(data.pageNo < data.totalPage) {
						pageh += '<span class="right"  onclick="initTemplateList('+(parseInt(data.pageNo)+1)+', '+dictDataKey+')">下一页</span>';
					}
					$(".t_template_" + dictDataKey + " .page_change").html(pageh);
				}
			}, error:function(){
				$.alert("查询异常","");
			}
		})
	}
	function initTeacherCommentType() {
		$.ajax({
			url: basePath + "/sys/dict/dictData/dictCode",
	        type: 'POST',
	        dataType: 'json',
	        data: {
	        	dictCode: 'teacher_comment'
	        },
			async : false,
			success : function(data) {
				if(data != null) {
					var commentList = new Array();
					if('${comment}'.length > 0) {
						var obj = JSON.parse('${comment}');
						var commentList = obj.teacherCommentType.split(",");
					}
					var html = "";
					for(var i in data) {
						var itm = data[i];
						if(commentList.length > 0) {
							for(var i in commentList) {
								var type = commentList[i].split("|")[0];
								var num = commentList[i].split("|")[1];
								if(type == itm.dictDataValue) {
									html += '<li>\
								        <img src="<%=basePath%>/images/iconJ.png"><p>'+itm.dictDataValue+'</p>\
								        <div class="star-box">\
								          <span class="icon'+(parseInt(num) >= 1 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 2 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 3 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 4 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 5 ? " icon-48 f-red" : " icon-49")+'"></span>\
								        </div>\
								      </li>';
								}
							}
						}else {
							html += '<li>\
						        <img src="<%=basePath%>/images/iconJ.png"><p>'+itm.dictDataValue+'</p>\
						        <div class="star-box">\
						          <span class="icon icon-48 f-red"></span>\
						          <span class="icon icon-48 f-red"></span>\
						          <span class="icon icon-48 f-red"></span>\
						          <span class="icon icon-48 f-red"></span>\
						          <span class="icon icon-48 f-red"></span>\
						        </div>\
						      </li>';
						}
					}
					$("#commentList").html(html);
					init();
				}
			}, error:function(){
				$.alert("查询异常","");
			}
		})
	}

	//拍照或从手机相册中选图接口
    $('#filePicker').on('click', function () {
        wx.chooseImage({
            count: 6,
            needResult: 1,
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
           		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
           		wxuploadImage(localIds);
            },
            fail: function (res) {
                alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
            }

        });
    });
	function wxuploadImage(localIds) {  
		var localId = localIds.pop();
        wx.uploadImage({  
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得  
            isShowProgressTips: 1, // 默认为1，显示进度提示  
            success: function (res) {  
                mediaId = res.serverId; // 返回图片的服务器端ID  
                wechatMediaDownload(mediaId);
                if(localIds.length > 0){
                	wxuploadImage(localIds);
                }
            },  
            fail: function (error) {  
                alert(Json.stringify(error));  
            }  
        });
    }  
	function wechatMediaDownload(mediaId) {
	   	var params = {};
	   	params.mediaId = mediaId;
        params.attachmentType = "image";
        params.relationType = "weekComment";
        params.relationId = emptyToNull("${comment.id}");
        $.ajax({
	 		url : basePath + "/ls/attchment/upload/wx",
	 		type : "post",
	 		data : params,
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code != '000') {
	 				$.toast(data.msg, "cancel");
	 			}else {
	 				$('#img1').append('<li class="weui_uploader_file" data-id="'+data.data.id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data.data.attachmentUrl +'"/></li>'); 
	 			}
	 		}, error:function(){
	 			$.alert("上传异常","");
      		}
	 	});
   }
</script>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>